webpack - output详细配置

指打包生成的文件输出；

直接贴配置代码：

// webpack.detail.js 文件

const path = require('path');
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // entry: './src/js/index.js',
  // entry: ['./src/js/index.js', './src/js/other_entrance.js'],
  entry: {
    main: './src/js/index.js',
    other: './src/js/other_entrance.js'
  },
  output: {
    // 输出文件的名称， 目录+文件名
    filename: 'js/[name].js',
    // 输出文件的目录，所有资源输出的公共目录
    path: path.resolve(__dirname, 'dist'),
    // 所有资源引入公共路径前缀
    publicPath: '/',
    // 非入口chunk的名称
    chunkFilename: 'js/[name]_chunk.js',
    // 向外暴露一个全局变量，变量名为 [name]的值，
    // library: '[name]',
  },
  module: {
    rules: []
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: `./src/index.html`,
    }),
    new CleanWebpackPlugin(),
  ],
  mode: 'development',
}

其中测试一下，publicPath 和 library

• publicPath

  当不设置该值：

  

  设置为/时候，

  

​ 可以看到，在引用js文件的时候，前面会加上/。

• library

一般设置该值主要是跟dll一起使用。

设置了该值后，在js文件就会暴露一个全局变量，不设置的话是不会有的。

本章结束！